<template>
  <div>
  	<el-row>
	    <el-button @click="pushPage('propertiesAnalysis')" type="primary">房源分析</el-button>
	    <el-button @click="pushPage('passengerSourceAnalysis')" type="primary">客源分析</el-button>
	    <el-button @click="pushPage('transactionAnalysis')" type="primary">成交分析</el-button>
	    <el-button @click="pushPage('')" type="primary">人力分析</el-button>
  	</el-row>
    
    <el-row  class="rowCon" type="flex" align="start" justify="space-around"  :gutter="10">
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>成交统计</span>
        </div>
        <!-- 成交统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="houseAmount" :option="houseAmountOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>房源统计</span>
        </div>
        <!-- 房源统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="regionalHouse" :option="regionalHouseOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>户型成交统计</span>
        </div>
        <!-- 户型成交统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="typeHouse" :option="typeHouseOption" />      
      </el-card>
    </el-row>
    <el-row  class="rowCon" type="flex" align="start" justify="space-around"  :gutter="10">
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>成交收入统计</span>
        </div>
        <!-- 成交收入统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="turnover" :option="turnoverOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>客源类型统计</span>
        </div>
        <!-- 客源类型统计 -->
        <div style="min-width:20rem;min-height:30rem;height:30rem" id="hotChart"></div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>共享营销成交量</span>
        </div>
        <!-- 共享营销成交量 -->
        <div style="min-width:20rem;min-height:30rem;height:30rem" id="marketingChart"></div>
      </el-card>
    </el-row>
    <b-map-h></b-map-h>
  </div>
</template>
<script>
	import echarts from 'echarts';
  import chart from "../../../../components/Charts/chart";
  import bMapH from './my-compents/bMapH'
export default {
    name:'index',
    props:['params'],
    components: {
    	chart,bMapH
    },
	data() {
        return {
        	hotChart:null,
        	houseAmountOption:{},//成交统计
        	regionalHouseOption:{},//房源统计
        	turnoverOption:{},//成交收入统计
        	typeHouseOption:{},//户型成交统计
        	marketingChart:null//共享营销成交量
        }
    },
    methods:{
        pushPage(name){
            this.$router.push({ 
                path: name 
            })
        },
        //初始化热点C	hart
      initHotChart(){
      	var spirit = 'image://';
				var maxData = 2000;
				 
      	var Option = {
					    tooltip: {
					    },
					    xAxis: {
					        max: maxData,
					        splitLine: {show: false},
					        offset: 10,
					        axisLine: {
					            lineStyle: {
					                color: '#999'
					            }
					        },
					        axisLabel: {
					            margin: 10
					        }
					    },
					    yAxis: {
					        data: ['求购', '求租'],
					        inverse: true,
					        axisTick: {show: false},
					        axisLine: {show: false},
					        axisLabel: {
					            margin: 10,
					            textStyle: {
					                color: '#999',
					                fontSize: 16
					            }
					        }
					    },
					    grid: {
					        top: 'center',
					        height: 200,
					        left: 70,
					        right: 100
					    },
					    series: [{
					        // current data
					        type: 'pictorialBar',
					        symbol: spirit,
					        symbolRepeat: 'fixed',
					        symbolMargin: '5%',
					        symbolClip: true,
					        symbolSize: 30,
					        symbolBoundingData: maxData,
					        data: [891, 1220],
					        z: 10
					    }, {
					        // full data
					        type: 'pictorialBar',
					        itemStyle: {
					            normal: {
					                opacity: 0.2
					            }
					        },
					        label: {
					            normal: {
					                show: true,
					                formatter: function (params) {
					                    return (params.value / maxData * 100).toFixed(1) + ' %';
					                },
					                position: 'right',
					                offset: [10, 0],
					                textStyle: {
					                    color: 'red',
					                    fontSize: 18
					                }
					            }
					        },
					        animationDuration: 0,
					        symbolRepeat: 'fixed',
					        symbolMargin: '5%',
					        symbol: spirit,
					        symbolSize: 30,
					        symbolBoundingData: maxData,
					        data: [891, 1220],
					        z: 5
					    }]
					};
      					var self = this
		             if(this.hotChart){
		                this.hotChart.clear()
                    this.hotChart.dispose()
                }
		              setTimeout(function() {
		              self.hotChart = echarts.init(document.getElementById("hotChart"))
                   	self.hotChart.setOption(Option)
		              }, 10);
      },
        initTypeHouseChat(){
          var data = [
            { value: 335, name: "一居室" ,type:'pie'},
            { value: 310, name: "二居室" ,type:'pie'},
            { value: 234, name: "三居室" ,type:'pie'},
            { value: 310, name: "四居室" ,type:'pie'},
            { value: 234, name: "五居室" ,type:'pie'},
          ]
          var initData = {
            //需要给我传的数据
            yData: [data],
            pieName:'房源销量分布',
            legendObj:{
              data:['一居室','二居室','三居室','四居室','五居室'],
              bottom: 10,
            },
            refName: "typeHouse",
            returnOption: "typeHouseOption",
            textColor: "white",
            radius:'80%',
            center:['50%','50%'],
            label: {
                normal: {
                    position: 'inner',
                    formatter: '{b}\n{d}% \n{c}\r(套) ',
                    fontSize:15
                }
            },
          };
          this.forEachFun(initData)
      },
      //共享营销成交量
        initMarketingChat(){
          var Option = { backgroundColor: "#ffffff",
    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#9FE6B8","#FFDB5C",],
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}"
    },
    legend: {
        data: ['注册人数','活跃人数','成交人数']
    },
    series: [
        {
            name: '共享营销',
            type: 'funnel',
            left: '10%',
            width: '80%',
            label: {
                normal: {
                    formatter: '{b}'
                },
                emphasis: {
                    position:'inside',
                    formatter: '{b}: {c}人'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            data: [
                {value: 6000, name: '注册人数'},
                {value: 4000, name: '活跃人数'},
                {value: 200, name: '成交人数'}
            ]
        },
        {
            name: '共享营销',
            type: 'funnel',
            left: '10%',
            width: '80%',
            maxSize: '80%',
            label: {
                normal: {
                    position: 'inside',
                    formatter: '{c}人',
                    textStyle: {
                        color: '#777'
                    }
                },
                emphasis: {
                    position:'inside',
                    formatter: '{b}: {c}人'
                }
            },
            itemStyle: {
                normal: {
                    opacity: 0,
                    borderColor: '#fff',
                    borderWidth: 2
                }
            },
            data: [
                {value: 6000, name: '注册人数'},
                {value: 4000, name: '活跃人数'},
                {value: 200, name: '成交人数'}
            ]
        }
    ]
};
          var self = this
		             if(this.marketingChart){
		                this.marketingChart.clear()
                    this.marketingChart.dispose()
                }
		              setTimeout(function() {
		              self.marketingChart = echarts.init(document.getElementById("marketingChart"))
                   	self.marketingChart.setOption(Option)
		              }, 10);
      },
        //成交统计
       initHouseAmountChart(){
            var data = [
            { value: 700, name: "租赁" ,type:'pie'},
            { value: 300, name: "代办" ,type:'pie'},
            { value: 500, name: "三方" ,type:'pie'},
          ]
          var initData = {
            //需要给我传的数据
            yData: [data],
            pieName:'房源销量分布',
            legendObj:{
            data:['租赁','代办',"三方"],
              bottom: 10,
            },
            refName: "houseAmount",
            returnOption: "houseAmountOption",
            textColor: "black",
            radius:['40%','60%'],
            center:['50%','50%'],
            label: {
                normal: {
                    position: 'outside',
                    formatter: '{b}\n{d}% \n{c}\r(套) ',
                    fontSize:15
                }
            },
            seriesCenter:[{
                    name: '白',
                    type: 'pie',
                    clockWise: true,
                    hoverAnimation: false,
                    radius: [100, 100],
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                        value: 1,
                        label: {
                            normal: {
                                formatter: '\n1000',
                                textStyle: {
                                    color: '#666666',
                                    fontSize: 26
                                }
                            }
                        }
                    }, {
                        tooltip: {
                            show: false
                        },
                        label: {
                            normal: {
                                formatter: '\n成交统计',
                                textStyle: {
                                    color: '#666666',
                                    fontSize: 15
                                }
                            }
                        }
                    }]
                        }]
          };
          this.forEachFun(initData)
      },
      //成交收入统计
      initTurnoverChart(){
          var xData = [
          "租赁服务费",
          "居间服务费",
          "风险保证金",
          "评估费结转"
        ];
        var data1 = {
          data: [500, 1000, 600, 1500],
          type: "bar"
        };
        var initData = {
              //需要给我传的数据
              exchange: false, //xy轴数据互换
              xData: xData,
              yData: [data1],
              color: ["#FEAA40"], 
              legend: ["求购客源"],
              refName: "turnover",
              returnOption: "turnoverOption",
              textColor: "black",
              stack: "one",
              yAxisName: "(人)",
              grid: {
                right: "10%"
              },
              xAxisLine: {
                axisLabel: {
                	show:true,
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                	show:true,
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                	show:false,
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                	show:true,
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                	show:false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              }
            };
            this.forEachFun(initData);
      },
      //房源统计
      initRegionalHouseChart(){
          var xData = [
          "出租",
          "出售",
          "租售"
        ];
        var data1 = {
          data: [2000, 1000, 1500],
          type: "bar"
        };
        var initData = {
              //需要给我传的数据
              exchange: false, //xy轴数据互换
              xData: xData,
              yData: [data1],
              color: ["#FEAA40"], 
              legend: ["求购客源"],
              refName: "regionalHouse",
              returnOption: "regionalHouseOption",
              textColor: "black",
              stack: "one",
              yAxisName: "(人)",
              grid: {
                right: "10%"
              },
              xAxisLine: {
                axisLabel: {
                	show:false,
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                	show:true,
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                	show:false,
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                	show:true,
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                	show:false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              }
            };
            this.forEachFun(initData);
      },
      forEachFun(initData) {
          //处理数据生成Option
          var option = this.$utils.returnItemSeries(initData);
          this.$set(this, initData.returnOption, option);
          var self = this;
          setTimeout(function() {
            if (self.$refs[initData.refName][0]) {
              self.$refs[initData.refName][0].initChart();
            } else {
              self.$refs[initData.refName].initChart();
            }
          }, 0);
      },
      //获取数据
        fetchData(){
          this.initHouseAmountChart();
          this.initRegionalHouseChart();
          this.initTypeHouseChat();
          this.initTurnoverChart();
          this.initHotChart();
          this.initMarketingChat();
        },
    },
    mounted(){
      this.fetchData()
    }
}
</script>
<style scoped>

</style>
